<template>
  <div>
      <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="search-btn" icon="el-icon-search" @click="search()"></el-button>
          <el-button type="primary" class="search-btn" icon="el-icon-refresh-left" @click="setAlarm()"></el-button>
        </div>
        <div>
            <el-table
                :data="alarmData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="报警ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="deviceName"
                    label="设备名"
                    width="160">
                </el-table-column>
                <el-table-column
                    label="血压"
                    width="160">
                     <template slot-scope="scope">
                        <span>{{scope.row.alarmPresure}}/{{scope.row.alarmDiastolicPressure}}mmHg</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="血糖值"
                    width="160">
                    <template slot-scope="scope">
                        <span>{{scope.row.alarmGlucose}}mmol/L</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="血糖报警"
                    width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.alarmGlucoseType">血糖报警</span>
                        <span v-else>血糖正常</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="血压报警"
                    width="160">
                    <template slot-scope="scope">
                        <span v-if="scope.row.alarmPresureType">血压报警</span>
                        <span v-else>血压正常</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="gmtCreate"
                    label="报警时间"
                    width="160">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" circle @click="getDeleteId(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
                </el-table>
        </div>
  </div>
</template>

<script>
import {dateFormat} from '../util/utils'
export default {
  props: [],
  components: {
  },
  data() {
    return {
        value: "",
        alarm:{},
        alarmData:{},
        startDate: "",
        endDate: "",
        currentPage:1,
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
      this.getAlarm()
  },
  methods: {
      setAlarm(){
          this.getAlarm()
      },
      getAlarm(){
        this.axios.get("/glucosePresure/list").then(
            response=>{
                this.alarm=response.data[0]
                this.getAlarmData()
                console.log('Alarm',response.data)
            },error=>{
                console.log('Alarm',error.msg)
            }
        )
      },
      getAlarmData(){
            this.$http.get(`/alarmHistoryLog/lists?deviceName=${this.alarm.deviceName}&startDate=${this.startDate}&endDate=${this.endDate}`).then(
                    response=>{
                        console.log('ala',response.data)
                        this.alarmData=response.data
                        console.log(this.alarmData)
                    },error=>{
                        console.log('ala',error.msg)
                    }
                )
          
      },
      onChange(){
          this.getAlarmData()
      },
      getDeleteId(id){
          console.log(id)
          this.$http.get(`/alarmHistoryLog/delete?id=${id}`).then(
              response=>{
                  console.log(response.data)
                  this.getAlarmData()
              },error=>{
                  console.log(error.msg)
              }
          )
      },
      search(){
      this.startDate=dateFormat(this.value[0],"yyyy-MM-dd")
      this.endDate=dateFormat(this.value[1],"yyyy-MM-dd")
      this.getAlarmData()
    }
  },
};
</script>
<style scoped lang="less">
.title {
  display: flex;
  justify-content: start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>